<template>
  <div id="wrapper">
    <!-- 左侧菜单 -->
    <nav
      style="background-color:rgba(0,0,0,0.3);"
      class="navbar navbar-inverse navbar-fixed-top"
      id="sidebar-wrapper"
      role="navigation"
    >
      <ul class="nav sidebar-nav">
        <li class="sidebar-brand"></li>

        <!-- 下面这2个换行必须保留：左侧主菜单往下空2行 -->
        <br>
        <br>

        <li>
          <a href="#" @click="changeMenu(0)">
            <i class="fa fa-fw fa-home"></i> JY-breeze 
          </a>
        </li>
        <li>
          <a href="#" @click="changeMenu(1)">
            <i class="fa fa-fw fa-folder"></i> JY-文章管理
          </a>
        </li>
        <li>
          <a href="#">
            <i class="fa fa-fw fa-file-o"></i> 分类设置
          </a>
        </li>
        <li>
          <a href="#">
            <i class="fa fa-fw fa-cog"></i> 专栏管理
          </a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            <i class="fa fa-fw fa-plus"></i> 活动
            <span class="caret"></span>
          </a>
          <ul class="dropdown-menu" role="menu">
            <li class="dropdown-header">Dropdown heading</li>
            <li>
              <a href="#">Action</a>
            </li>
            <li>
              <a href="#">Another action</a>
            </li>
            <li>
              <a href="#">Something else here</a>
            </li>
            <li>
              <a href="#">Separated link</a>
            </li>
            <li>
              <a href="#">One more separated link</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">
            <i class="fa fa-fw fa-bank"></i> 留言评论
          </a>
        </li>
        <li>
          <a href="#">
            <i class="fa fa-fw fa-dropbox"></i> 关于作者
          </a>
        </li>
        <li>
          <a href="#" @click="changeMenu(7)">
            <i class="fa fa-fw fa-twitter"></i> 系统设置
          </a>
        </li>
      </ul>
    </nav>

    <!-- 左侧菜单开关 -->
    <div id="page-content-wrapper">
      <button type="button" class="hamburger is-closed animated fadeInLeft" data-toggle="offcanvas">
        <span class="hamb-top"></span>
        <span class="hamb-middle"></span>
        <span class="hamb-bottom"></span>
      </button>
    </div>

    <!-- 把右菜单固定在右上角 -->
    <!-- style="z-index: 9999; position: fixed ! important; right: 0px; top: 20px;" -->
    <div>
      <table width="100%" style="position: absolute; width:70%; right: 10%; top: 20px; left:20%;">
        <!-- 文章管理 -->
        <div v-show="articleHomeIf">
          <articleHome ref="articleHome"></articleHome>
        </div>
        <!-- 系统设置 -->
        <div v-show="systemHomeIf">
          <systemHome ref="systemHome"></systemHome>
        </div>
        <!-- 个人中心 -->
        <div v-show="personalCenterHomeIf">
          <personalCenterHome ref="personalCenterHome"></personalCenterHome>
        </div>
      </table>
    </div>
  </div>
</template>

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="http://www.jq22.com/jquery/bootstrap-3.3.4.js"></script>
<script type="text/javascript">
import menuRight from "./menuRight";
import articleHome from "../article/articleHome";
import systemHome from "../system/systemHome";
import personalCenterHome from "../personalCenter/personalCenterHome";

export default {
  name: "allHome",
  data: function() {
    return {
      // systemHome: true,
      // roleManage: false,
      articleHomeIf: false,
      personalCenterHomeIf: true,
      systemHomeIf: false
    };
  },
  components: {
    menuRight, // 可以这样引入多个vue
    systemHome,
    personalCenterHome,
    articleHome
  },
  methods: {
    createdFun() {
      // 主菜单设置
      var trigger = $(".hamburger"),
        overlay = $(".overlay"),
        isClosed = false;

      trigger.click(function() {
        hamburger_cross();
      });

      function hamburger_cross() {
        if (isClosed == true) {
          overlay.hide();
          trigger.removeClass("is-open");
          trigger.addClass("is-closed");
          isClosed = false;
        } else {
          overlay.show();
          trigger.removeClass("is-closed");
          trigger.addClass("is-open");
          isClosed = true;
        }
      }
    },
    // 切换右主体页面
    changeMenu(index) {
      if (index == 0) {
        // 个人中心
        this.$refs.personalCenterHome.setPage("我是无用的参数");
        this.personalCenterHomeIf = true;
        this.systemHomeIf = false;
        this.articleHomeIf = false;
      } else if (index == 7) {
        // 系统设置
        this.$refs.systemHome.setPage();
        this.systemHomeIf = true;
        this.personalCenterHomeIf = false;
        this.articleHomeIf = false;
      } else if (index == 1) {
        // 文章管理
        this.$refs.articleHome.setPage();
        this.articleHomeIf = true;
        this.personalCenterHomeIf = false;
        this.systemHomeIf = false;
      }
      console.log(`点击的是：` + index);
    },
    mountedFun() {
      // 主菜单设置
      $('[data-toggle="offcanvas"]').click(function() {
        $("#wrapper").toggleClass("toggled");
      });

      // 右主体页面
      $("#systemHome").css("display", "none"); // 隐藏
      $("#personalCenterHome").css("display", "block"); // 显示
    }
  },
  // 页面加载就执行
  created() {
    this.createdFun();
  },
  // 页面加载完成后执行
  mounted() {
    this.mountedFun();
  }
};
</script>


<style>
@import "http://www.jq22.com/jquery/bootstrap-3.3.4.css";
@import "../../../../static/base/allHome.css";
</style>